<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist功能开发</title>
    <script src="vue.js"></script>
</head>
<body>
    
    <div id="root">
        <div>
            <input v-model="inputValue"/>
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <!-- vue中父组件向子组件传值是通过属性的形式 -->
            <todo-item v-for="(item, index) of list" 
                :key="index" 
                :content="item" 
                :index="index"
                @deleteself="handleDelete">             <!-- 父组件监听子组件的deleteself事件 -->
            </todo-item>
        </ul>
    </div>

    <script>

        // 子组件
        Vue.component('todo-item', {
            props: ['content', 'index'],                 
            template: '<li @click="handleClick">{{content}}</li>',          // 组件模版绑定的事件对应每个组件里面自己的方法
            methods: {
                handleClick: function() {
                    // 子组件如果想被删除掉，一定要在父组件中把渲染子组件的那条数据删除掉
                    // 通过发布订阅模式
                    this.$emit('deleteself', this.index)        // 子组件向外部发布deleteself事件
                }
            }
        })


        // 父组件
        new Vue({
            el: "#root",
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                handleSubmit: function() {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                handleDelete: function(index) {
                    this.list.splice(index, 1)      // 从对应下标的位置删除一项就可以
                }
            }
        })
    </script>

</body>
</html>